<template>
  <div class="App">
    <h2>组件基础</h2>
    <h2>1. 简单的组件</h2>
    <div class="block-div">
      <ButtonCounter></ButtonCounter>
    </div>

    <h2>2. 组件通信-父传子-案例1</h2>
      <Son :title="myTitile" @changeTitle="changeTitle"></Son>

    <h2>2. 组件通信-props任意类型和数量</h2>
      <UserInfo
          :username="username"
          :age="age"
          :isSingle="isSingle"
          :car="car"
          :hobby="hobby">
      </UserInfo>

    <h2>2. 组件通信-props校验</h2>
    <div class="block-div">
      <BaseProgress :w="width"></BaseProgress>
    </div>
    <h2>非父子通信-Bus事件总线</h2>
    <BaseA></BaseA>
    <BaseB></BaseB>
    <h2>非父子通信-provide&inject</h2>
    我是父组件
    <button @click="update">修改复杂数据类型-响应式</button>
    <SonA></SonA>
    <SonB></SonB>
    <h2>v-model的原理</h2>
    <v-model-theory></v-model-theory>
    <h2>表单类组件封装</h2>
    <BaseSelect v-model="selectId" ></BaseSelect>
    <h2>input组件封装</h2>
    <BaseInput v-model="inputMsg"></BaseInput>
    <BaseInput v-model="inputMsg"></BaseInput>
    <BaseInput v-model="inputMsg"></BaseInput>
    <h2>封装弹出框</h2>


  </div>
</template>
<script>
import Son from "@/components/scoped/Son.vue";
import ButtonCounter from "@/components/scoped/ButtonCounter.vue";
import UserInfo from "@/components/scoped/UserInfo.vue";
import BaseProgress from "@/components/scoped/BaseProgress.vue";
import BaseA from "@/components/scoped/BaseA.vue";
import BaseB from "@/components/scoped/BaseB.vue";
import SonB from "@/components/scoped/SonB.vue";
import SonA from "@/components/scoped/SonA.vue";
import VModelTheory from "@/components/scoped/v-modelTheory.vue";
import BaseSelect from "@/components/scoped/BaseSelect.vue";
import BaseInput from "@/components/scoped/BaseInput.vue";
import BaseDialog from "@/components/scoped/BaseDialog.vue";

export default {
  name: "componentsCommunication",
  components: {
    BaseDialog,
    BaseInput, BaseSelect, VModelTheory, SonA, SonB, BaseB, BaseA, BaseProgress, UserInfo, ButtonCounter, Son},
  provide() {
    return {
      color: this.color,        // 普通类型【非响应式】
      userInfo: this.userInfo,  // 复杂类型【响应式】
    }
  },
  data() {
    return {
      isShow: false,
      inputMsg: '',
      selectId: '102',
      myTitile: "我要学习vue",
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
      width:30,
      color: 'green',
      userInfo: {
        name: 'lisi',
        age: 18
      }
    }
  },
  methods: {
    changeTitle(newTitle) {
      this.myTitile = newTitle
    },
    update(){
      this.userInfo.name = "wang"
      this.userInfo.age = 22
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h2 {
//display: inline; /* 将元素显示为行级元素 */
  background: linear-gradient(to right, orange, yellow); /* 背景橙色渐变 */
  color: black; /* 字体颜色为黑色 */
  border-radius: 5px; /* 添加圆角 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  padding: 10px; /* 内边距为10px，高度自适应 */
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 根据屏幕大小自动填充网格列 */
  grid-gap: 10px; /* 如果需要，可以调整网格间距 */
  justify-content: center; /* 水平居中 */
}

.grid-item {
  display: flex;
  flex-direction: column; /* 将网格项的内容垂直排列 */
  height: 300px; /* 设置高度 */
  border: 1px solid #ccc; /* 设置边框 */
  border-radius: 10px; /* 设置圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影 */
}

.title {

  padding: 5px; /* 设置标题内边距 */
  margin: 0; /* 移除默认的边距 */
  text-align: center; /* 文字居中 */
}

.content {
  background-color: #fff; /* 设置内容背景色为白色 */
  flex-grow: 1; /* 让内容部分占据剩余空间 */
  padding: 10px; /* 设置内容内边距 */
}
.block-div {


  border-radius: 10px; /* 设置圆角 */
  display: inline-block; /* 将元素转换为块级元素 */
  padding: 10px; /* 内边距为10px */
  margin: 5px;
  border: 1px solid #eeeeee; /* 1px的边框 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}
.block-div2 {
  height: 500px;
  width: 500px;
  border-radius: 10px; /* 设置圆角 */
  display: inline-block; /* 将元素转换为块级元素 */
  padding: 10px; /* 内边距为10px */
  margin: 5px;
  border: 1px solid #eeeeee; /* 1px的边框 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */

}
</style>
